<template>
	<mg-cell :cname="cname" isr='1' :last='last'>
		<template slot='bd'>
			<view v-if="title" class="c3 f30 f-x-bt mb20">
				<view class="f-g-0 mr20" :class="[htc]" :style="{fontWeight: bold ? 'bold' : '400'}">{{title}}</view>
				<view v-if="ft" class="c9 f24">{{ft}}</view>
			</view>
			<view class="bf7 bs5 p23">
				<textarea v-model="tVal" :maxlength="max" :placeholder="pr" class="w100" :style="{height:th+'rpx',fontSize:'30rpx'}"></textarea>
				<view v-if="max" class="t-r c9">{{tVal.length}}/{{max}}</view>
			</view>
		</template>>
	</mg-cell>
</template>
<script>
	import MgCell from '@/components/common/mg-cell.vue'
	export default {
		components: {
			MgCell,
		},
		props: {
			title: {
				type: String,
				default: '',
			},
			htc: {
				type: String,
				default: '',
			},
			bold:{
				type: Boolean,
				default: false
			},
			ft: {
				type: String,
				default: '',
			},
			last: {
				type: String,
				default: '',
			},
			value: {
				type:String,
				default:''
			},
			color: '',
			cname: {
				type: String,
				default: '',
			},
			sname: Object,
			th: {
				type: String,
				default: '300',
			},
			max: {
				type: String,
				default: '',
			},
			pr: {
				type: String,
				default: '',
			},
		},
		data() {
			return {}
		},
		computed: {
			tVal: {
				get() {
					return this.value
				},
				set(newVal) {
					this.$emit("input", newVal)
				}
			}
		},
		methods: {
			checkboxChange(e) {
				this.cbVal = !this.cbVal
			}
		}
	}
</script>

<style scoped>

</style>
